<template>
	<u-popup :show="seleced"  mode="bottom" :round="10"  :closeable="true"
		closeIconPos="top-right" @close="close">
	       	<view class="pay">
			<view class="header">
				<view>￥{{obj.sum}}.00</view>
			</view>
			<view class="pay-Ordio">
				<view class="ordio-li" v-for="(item,i) in select" :key="i">
					<view class="img1">
						<image src="../../static/cz_zc@2x.png" v-show="item.selected == false" @click="selects(i)"></image>
						<image src="../../static/cz_xz@2x.png" v-show="item.selected == true" @click="selects(i)"></image>
					</view>
					<view class="img2">
						<image :src="item.url"></image>
					</view>
					<view class="text">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="btu">
				<u-button type="primary" shape="circle" @click="addOrder()">确认付款</u-button>
			</view>
		</view>   
</u-popup>

</template>

<script>
	import {updateOrders} from '../../api/mock.js'
	export default {
		name:"good-pay",
		props:{
			obj:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				select:[
					{selected:false,url:'../../static/zifubao.png',text:'支付宝支付'},
					{selected:false,url:'../../static/zhifu.png',text:'微信支付'}
				],
				seleced:false,
			};
		},
		watch:{
			obj(val){
				console.log(val);
				this.seleced = val.show;
			}
		},
		methods:{
			selects(i){
				this.select[i].selected = !this.select[i].selected;
				this.select.forEach((item,j)=>{
					if(j != i ){
						item.selected = false;
					}
				})
			},
			close(){
				this.seleced = false;
				console.log(this.show);
				uni.showModal({
					title:'提示',
					content:'是否取消支付',
					success:(res)=>{
						if(res.confirm){
							uni.showToast({
								title:'已取消支付'
							})
							uni.redirectTo({
								url:'/pagesC/order/order'
							})
						}else if(res.cancel){
							this.seleced = true;
							uni.showToast({
								title:'已取消',
								icon:'none'
							})
						}
					}
				})
				
			},
			addOrder(){
				this.seleced = false;
				updateOrders(this.obj.id).then((res)=>{
						console.log(res);
					}).catch((err)=>{
						console.log(err);
				})
				uni.redirectTo({
					url:'/pagesC/order/order'
				})
			},
		}
	}
</script>

<style lang="scss">
	.pay{
		padding: 20px;
		text-align: center;
		.header{
			height: 50px;
			font-size: 30px;
			line-height: 50px;
		}
		.pay-Ordio{
			.ordio-li{
				display: flex;
				.img1{
					padding: 20px;
				}
				.img2{
					display: flex;
					align-items: center;
				}
				.text{
					padding: 20px;
				}
				.img1 image{
					width: 20px;
					height: 20px;
				}
				.img2 image{
					width: 40px;
					height: 40px;
				}
			}
		}
	}
</style>